/*
 * $Id: cart.scss 353 2012-12-03 04:54:09Z bobcat $
 * Cart branding CSS goes here.
 */

// imports
@import '../main/main';

// elements
img[src="/checkout/images/spacer.gif"],
img[src="/checkout/spacer01.gif"] {
  display: none;
}

// classes
.ucDefault,
.ucFormLabel,
.ucFormField,
.ucShoppingCartField,
.ucShoppingCartNoItemText,
.ucFormLabelPaymentPreference {
  color: $text-color-dark;
  font-size: .9em;
  font-family: $font-family;
}

.ucDefault {
  display: inline-block;
}

.ucFormField,
div.ucDefault,
span.ucDefault {
  margin-bottom: .5em;
}

.ucFormLabel {
  font-size: 1em;
}

.ucShoppingCartNoItemText {
  display: inline-block;
  margin: 2em 0;
}

.ucTableBorderBackground {
  display: none;
}

.ucTableHeaderBackground {
  border-bottom: $border-width solid $border-color;
  background-color: #eee;
  margin-bottom: .5em;
  color: $text-color-dark;

  td {
    padding: .2em 0;

    span {
      font-size: 1.1em;
      font-weight: normal;
    }
  }
}

.ucErrorMessageBorder {
  background-color: transparent;
  border: 1px solid #D98;
  width: 100% !important;

  .ucErrorMessageBackground {
    padding: 1em;
  }
}

.ucErrorMessageIcon {
  background-position: left center;
}

.ucColorSubHeader {
  background-color: #eee;
  border-bottom: $border-width solid $border-color;
  text-align: center;
  margin-bottom: .5em;
  color: $text-color-dark;
  display: inline-block;
  width: 100%;
  padding: .2em 0;
  font-size: 1.2em;
  font-family: $font-family;
  font-weight: normal;
}

.ucShoppingBackground {
  background-color: transparent;
  padding: .5em 0;
}

.ucShoppingCartText {
  font-size: .9em;
  color: $text-color-dark;
}

// specific page styles
.access-account > form > table {
  width: 100%;

  &.ucErrorMessageBorder {
    & > tbody > tr > td > table {
      margin-bottom: 0;
      width: 99%;
    }
  }

  & > tbody > tr > td {
    display: none;

    &:nth-child(3n+1) {
      display: inline-block;
      width: 100%;
    }

    & > table {
      width: 100%;
      margin-bottom: 2em;
    }
  }
}

.view-cart {
  & > form > table b {
    padding-left: .5em;
  }
}

.forgot-password {
  & > form > table {
    margin-bottom: 2em;
  }

  table {
    width: 100%;
  }

  td {
    padding: 0;

    &.ucErrorMessageBackground {
      padding: 1em;
    }
  }

  .ucFormLabel {
    font-size: .9em;
  }

  .ucFormField {
    width: 16em !important;
  }
}

.shipping {
  & > form > table {
    width: 100%;

    & > tbody > tr > td {
      width: 100%;
      padding-left: 0;
      padding-right: 0;

      & > table {
        width: 100%;

        & > tbody > tr > td > table {

          & > tbody > tr > td {
            padding-right: .25em;
          }

        }
      }
    }
  }

  td.ucDefault {
    padding: .25em;
    width: 12em;
    font-size: .9em;

    & > table {
      width: 100%;
    }
  }
}

.options {
  & > form > table {
    width: 100%;

    & > tbody > tr > td > table {
      margin-bottom: 1.5em;
      width: 100%;

      & > tbody > tr > td > table {
        & > tbody > tr > td {
          padding: .2em .1em;
        }
      }
    }
  }
}

.review {
  & > form > table {
    & > tbody > tr > td {
      display: block;

      & > table {
        width: 100%;
        margin-bottom: 1.5em;
      }
    }
  }

  .ucFinalizeOrderButton {
    position: relative;
    top: -2em;
  }

  .ucFormRequired {
    color: red;
    margin-right: .2em;
  }

  .ucReturnPolicyText {
    font-size: .9em;

    pre {
      white-space: normal;
      font-family: $font-family;
    }

    div {
      margin-top: 1em;
      padding-left: 1em;
    }
  }

  .ucReviewShippingInfoBackground,
  .ucReviewSummaryBackground {
    display: block;

    .ucTableHeaderBackground {
      padding-left: .25em;
    }
  }

  .ucReviewShippingInfoBackground {
    padding-right: .25em;
    width: 100%;
    margin-bottom: 2em;
  }

  .ucTableHeader {
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5em;
  }

  .ucTableItemLightBackground {
    background: white;
  }

  .ucTableItemDarkBackground {
    background: #f1f1f1;
  }

  .ucTableItemLightBackground,
  .ucTableItemDarkBackground {
    border-bottom: 1px solid $border-color;

    & > td[colspan="3"] {
      display: none;
    }
  }

  .ucTableItemLightBackground,
  .ucTableItemDarkBackground,
  .ucReviewSummaryBackground tr {
    & > td {
      padding: .25em 0;
    }

    td[colspan="9"] {
      display: none;
    }
  }

  .ucReviewSummaryBackground tr {
    padding-left: .25em;

    & > td {
      padding: 0 .25em;
    }
  }

  .ucReviewAddressText {
    font-size: .9em;
    font-family: $font-family;
    margin-top: .5em;
    display: block;

    br + br + br + br + br + br + br {
      display: none;
    }
  }

  .ucSmall {
    font-size: .8em;
  }

  td.ucDefault {
    width: 13em;
  }

  input {
    width: 24em !important;
  }

  input[type="checkbox"] {
    width: auto !important;
    margin-right: .5em;
  }

  select {
    width: auto !important;
  }

  .ucFormField[name="dayPhone"] {
    width: 11em !important;
    margin-right: 1em;
  }

  .ucFormField[name="eveningPhone"] {
    width: 11.5em !important;
  }

  #firstName {
    width: 9em !important;
    margin-right: 1em;
  }

  #lastName {
    width: 13.5em !important;
  }

  #state {
    width: 13em !important;
    margin-right: 1em;
  }

  #zip {
    width: 9.5em !important;
  }

  #creditCardNumber {
    width: 18em !important;
  }

  #creditCardExpMonth {
    margin-right: 1em;
  }

  #creditCardVerificationNumber {
    width: 6em !important;
  }
}

.your-receipt {
  & > table {
    width: 100%;
  }
}

.forgot-password, .account-change-password {
  form {
    margin-left: auto;
    margin-right: auto;

    & > table {
      width: 100%;
    }

    td > table {
      width: 100%;
    }
  }
}

.backgroundsize {
  .ucUpdateButton,
  .ucRemoveButton,
  .ucSubmitButton,
  .ucCheckoutButton,
  .ucContinueButton,
  .ucContinueShoppingButton,
  .ucContinueCheckoutButton {
    background-size: cover;
  }

  .ucContinueCheckoutButton, .ucSubmitButton {
    background-image: none;
  }

  input.ucContinueCheckoutButton {
    background-image: url(/checkout/images/continueCheckout.png);
  }

  input.ucSubmitButtonOverlay {
    background-image: url(/checkout/images/submit.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .ucUpdateButton, .ucUpdateButtonOverlay {
    width: 5.6em;
    height: 1.5em;
  }

  .ucRemoveButton {
    background-image: url('../../img/icons/dark/64px/64_close.png');
    width: 1em;
    height: 1em;

    .ucRemoveButtonOverlay {
      width: inherit;
      height: inherit;
    }
  }

  .ucSubmitButton, .ucSubmitButtonOverlay {
    width: 5.2em;
    height: 1.5em;
    display: block;
    margin-right: 1em;
  }

  .ucCheckoutButton, .ucCheckoutButtonOverlay {
    width: 6.6em;
    height: 1.5em;
  }

  .ucContinueButton, .ucContinueButtonOverlay {
    height: 1.5em;
    width: 5.7em;
  }

  .ucUseThisAddressButton {
    background-size: 9em;
    height: 1.5em;
    width: 9.6em;
  }

  .ucUseThisAddressButtonOverlay {
    width: 100%;
    height: 100%;
  }

  .ucContinueShoppingButton, .ucContinueShoppingButtonOverlay {
    width: 10.3em;
    height: 1.5em;
  }

  .ucContinueCheckoutButton {
    width: 10.3em;
    height: 1.5em;
    display: block;
  }

  .ucFinalizeOrderButton {
    background-size: cover;
  }

  .ucFinalizeOrderButton,
  .ucFinalizeOrderButtonOverlay {
    height: 1.5em;
    width: 8em !important;
  }

}

// ids
#estimatedShipping {
  margin-top: 1.5em;

  td {
    padding-top: 0;
    padding-bottom: 0;
  }
}

#center-col {
  overflow-x: scroll;
}

// media queries
@import 'queries';
